import React from 'react';
import { Teacher, stageOptions } from '../../../shared/models';
import './TeacherTable.css';
interface TeacherTableProps {
  teachers: Teacher[];
  onViewDetail: (teacher: Teacher) => void;
  onEdit: (teacher: Teacher) => void;
  onDelete: (teacher: Teacher) => void;
}

const TeacherTable: React.FC<TeacherTableProps> = ({ teachers, onViewDetail, onEdit, onDelete }) => {
  // 选项数据定义
  const subjectOptions = [
    { value: 'chinese', label: '语文' },
    { value: 'math', label: '数学' },
    { value: 'english', label: '英语' },
    { value: 'physics', label: '物理' },
    { value: 'chemistry', label: '化学' },
    { value: 'biology', label: '生物' },
    { value: 'history', label: '历史' },
    { value: 'geography', label: '地理' },
    { value: 'politics', label: '政治' }
  ];

  // 使用从shared/models.ts导入的stageOptions，添加全部阶段选项
  const enhancedStageOptions = [
    { value: 'all', label: '全部阶段' },
    ...stageOptions
  ];

  const positionOptions = [
    { value: 'teacher', label: '教师' },
    { value: 'headteacher', label: '班主任' },
    { value: 'director', label: '教导主任' },
    { value: 'principal', label: '校长' }
  ];

  const statusOptions = [
    { value: 'active', label: '在职' },
    { value: 'leave', label: '请假' },
    { value: 'resigned', label: '已离职' },
    { value: 'retired', label: '已退休' }
  ];

  const departmentOptions = [
    { value: 'chinese', label: '语文组' },
    { value: 'math', label: '数学组' },
    { value: 'english', label: '英语组' },
    { value: 'science', label: '科学组' },
    { value: 'humanities', label: '人文组' },
    { value: 'administration', label: '行政部门' }
  ];

  // 获取选项的显示文本
  const getOptionLabel = (value: string, options: Array<{value: string, label: string}>) => {
    const option = options.find(opt => opt.value === value);
    return option ? option.label : value;
  };

  // 获取状态对应的样式类名
  const getStatusClassName = (status: string) => {
    switch (status) {
      case 'active':
        return 'status-active';
      case 'leave':
        return 'status-leave';
      case 'retired':
        return 'status-retired';
      default:
        return '';
    }
  };

  return (
    <div className="teacher-table-container">
      <table className="teacher-table">
        <thead>
          <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>科目</th>
            <th>教授阶段</th>
            <th>职位</th>
            <th>部门</th>
            <th>入职日期</th>
            <th>联系电话</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {teachers.length === 0 ? (
            <tr>
              <td colSpan={11} className="no-data">
                暂无教师数据
              </td>
            </tr>
          ) : (
            teachers.map((teacher) => (
              <tr key={teacher.id} className="teacher-row">
                <td>{teacher.id}</td>
                <td className="clickable-name" onClick={() => onViewDetail(teacher)} title="点击查看详情">
                  {teacher.name}
                </td>
                <td>{teacher.gender === 'male' ? '男' : '女'}</td>
                <td>{getOptionLabel(teacher.subject, subjectOptions)}</td>
                <td>{getOptionLabel(teacher.stage, enhancedStageOptions)}</td>
                <td>{getOptionLabel(teacher.position, positionOptions)}</td>
                <td>{getOptionLabel(teacher.department, departmentOptions)}</td>
                <td>{teacher.hireDate ? new Date(teacher.hireDate).toLocaleDateString('zh-CN') : ''}</td>
                <td>{teacher.phone}</td>
                <td>
                  <span className={`status-badge ${getStatusClassName(teacher.status)}`}>
                    {getOptionLabel(teacher.status, statusOptions)}
                  </span>
                </td>
                <td className="action-buttons">
                  <button 
                    className="btn-view" 
                    onClick={() => onViewDetail(teacher)}
                    title="查看详情"
                  >
                    详情
                  </button>
                  <button 
                    className="btn-edit" 
                    onClick={() => onEdit(teacher)}
                    title="编辑"
                  >
                    编辑
                  </button>
                  <button 
                    className="btn-delete" 
                    onClick={() => onDelete(teacher)}
                    title="删除"
                  >
                    删除
                  </button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default TeacherTable;